<template>
	<view>
		<u-navbar :title="money_name" :background="background" :back-text-style="{ color: 'white' }" title-color=#fff
			back-icon-color=#fff></u-navbar>
		<navigator url="/pages2/integral-mall/details/details" class="box-detail">{{money_name}}明细</navigator>
		<view class="box">

			<view class="box-img">
				<image class="box-img"
					src="/static/images/Omli4nVJe1rMC0KP.png">
				</image>
			</view>
			<view class="box-font">{{money_name}}</view>
			<view class="box-num">{{scoreinfo.score}}</view>
			<view class="box-zhuan" @click="zzshow = true">转赠</view>
			<view class="box-dui" @tap='shoptap'>兑换</view>

			<!-- 弹窗 -->
			<view class="popup flex-y-center flex-x-center" v-show="zzshow">
				<view class="tanchuang">
					<view class="tan-title">将{{money_name}}转增</view>
					<view class="tan-input flex-y-center">
						<input class="flex-grow-1" type="number" placeholder="请输入转赠数量" v-model='num' />
					</view>
					<view class="tan-input flex-y-center">
						<input class="flex-grow-1" type="text" placeholder="请输入转赠人的ID号" v-model='id' />
						<image class="flex-grow-0 icon" src="/pages2/static/images/sousuo.png" @tap="search"></image>
					</view>
					<view class="flex-y-center tan-person" v-if="touserinfo">
						<image :src="touserinfo.avatar" class="tan-person-img flex-grow-0"></image>
						<view class="flex-grow-1 tan-person-name">{{touserinfo.nickname}}</view>
					</view>
					<view class="tan-warn">

						<view class="tan-warn-font">*一旦转增，相应的{{money_name}}不可追回，请核实号转账人的id</view>
					</view>
					
					<view class="tan-button">
						<view class="tan-button-left" @click="zzshow = false">
							取消
						</view>
						<button class="tan-button-right" @click='success' :disabled="disabled" :loading="disabled">
							确定
						</button>
					</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import {
		My
	} from '../../../apirequest/my-model.js';
	var m = new My();
	export default {
		data() {
			return {
				zzshow: false,
				id: '',
				scoreinfo:'',
				touserinfo:false,
				num:'',
				disabled:false,
				money_name:this.globalData.money_name,
			}
		},
		onShow() {
			this._index();
		},
		methods: {
			_index() {
				var that = this;
				m.get_score_info((res) => {
					if(res.code == 1){
						that.scoreinfo = res.data
					}
				})
			},
			search(){
				var that = this;
				var no = this.id;
				if(!no || no == ''){
					uni.showToast({
						title:'请输入转赠人的ID号',
						icon:'none'
					})
					return false;
				}
				m.search_user({no:no},(res) => {
					if(res.code == 1){
						that.touserinfo = res.data;
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			success() {
				var that = this;
				var no = this.id
				
				if(!no || no == ''){
					uni.showToast({
						title:'请输入转赠人的ID号',
						icon:'none'
					})
					return false;
				}
				if(!this.num || this.num <= 0 || parseFloat( this.num) > parseFloat(this.scoreinfo.score) ){
					uni.showToast({
						title:'请输入正确的转赠数量',
						icon:'none'
					})
					return false;
				}
				this.disabled = true;
				m.give_user_score({no:no,num:this.num},(res) => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					that.disabled = false;
				
					if(res.code == 1){
						that.zzshow = false
						setTimeout(() => {
						
							that._index();
						},1000)
					}
				})
			},
			shoptap: function() {
				uni.switchTab({
					url: '/pages/integral-mall/index/index'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
		font-size: 0.85rem;
	}

	.box {
		display: flex;
		flex-direction: column;
		align-items: center;

		.box-img {
			width: 220rpx;
			height: 220rpx;
			margin-top: 10rpx;
		}

		.box-font {
			margin-top: 40rpx;
			font-size: 36rpx;
		}

		.box-num {
			margin-top: 40rpx;
			font-size: 52rpx;
			font-weight: bold;
		}

		.box-zhuan {
			width: 75%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 34rpx;
			color: #2a86fa;
			border: #2a86fa solid 2rpx;
			border-radius: 10rpx;
			position: fixed;
			bottom: 300rpx;
		}

		.box-dui {
			width: 75%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 34rpx;
			color: #fff;
			// margin-top: 40rpx;
			border-radius: 10rpx;
			background-color: #2a86fa;
			position: fixed;
			bottom: 160rpx;
		}
	}

	.box-detail {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin: 20rpx 30rpx 10rpx 0;
		font-size: 30rpx;
		color: #2a86fa;
	}

	.popup {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;

		.tanchuang {
			background: #fff;
			text-align: center;
			border-radius: 10rpx;
			padding: 20rpx;

			.tan-title {
				font-size: 34rpx;

				margin-top: 40rpx;
			}

			.tan-input {
				width: 90%;
				margin: 60rpx auto 0;
				padding: 20rpx;
				box-shadow: 0px 0px 5px 3px #ececec;
				text-align: center;

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
				}
			}

			.tan-warn {
				display: flex;
				flex-direction: row;
				margin-top: 50rpx;
				font-size: 24rpx;
				color: red;

				.tan-warn-img {
					width: 15rpx;
					height: 15rpx;
				}
			}

			.tan-person {
				margin: 20rpx 0;
			
	.tan-person-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.tan-person-name {
					text-align: left;
				}
			}

			.tan-button {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 32upx;
				text-align: center;
				height: 80upx;
				line-height: 80upx;
				margin: 60rpx 20rpx 20rpx;

				.tan-button-left {
					width: 240upx;
					border: #2a86fa solid 2upx;
					color: #2a86fa;
					border-radius: 15upx;
					margin-right: 40upx;

				}

				.tan-button-right {
					width: 240upx;
					background-color: #2a86fa;
					color: #fff;
					border-radius: 15upx;
				}
			}
		}
	}
</style>
